<script>
import vuePhotoZoomPro from 'vue-photo-zoom-pro'
import 'vue-photo-zoom-pro/dist/style/vue-photo-zoom-pro.css'
import {mapState} from "vuex";
export default {
    name: "Zoom",
    components: {
        vuePhotoZoomPro,
    },
    computed:mapState("product",{
        skuInfo(state){
            return state.goodsInfo.skuInfo
        }
    })
}
</script>

<template>
    <vue-photo-zoom-pro  :out-zoomer="true" class="preview" :high-url="'/img'+skuInfo.defaultImg">
        <img :src="'/img'+skuInfo.defaultImg"  />
    </vue-photo-zoom-pro>
</template>

<style lang="less">
.preview {
    width: 400px;
    height: 400px;
    border: 1px solid #DFDFDF;
    img{
        width:100%;
        height: 100%;
    }
    .selector{
        background:rgba(255,0,0,0.5);
    }
    &:hover{
        cursor: move;
    }
}
</style>